<template>
    <div id="loginDiv">
        <el-form :model="ruleForm" :rules="rules" class="demo-ruleForm" id="form" ref="ruleForm">
            <div id="app">
                <h1>Login</h1><!-- aliceblue -->
                <el-form-item label="" prop="userName"   style="width:100%;">
                    <p><i class="el-icon-user-solid"></i>用户名:<input v-model="userName" class="name" id="userNname" placeholder="请输入账号"
                     type="text"><label id="name_trip"></label></p>
                </el-form-item>
                <el-form-item  label="" prop="password" style="width:100%;">
                    <p><i class="el-icon-lock"></i>密&nbsp&nbsp&nbsp码: <input class="inputt" id="password" placeholder="请输入密码" type="password"
                    v-model="password"><label id="password_trip"></label></p>
                </el-form-item>

                <p><i class="el-icon-loading"></i>验证码: <input class="inputt" placeholder="请输入验证码" type="text" v-model="msg2">
                    <span @click="yzmu">{{msg}}</span></p>

                <div style="text-align: center;margin-top: 30px;">
                    <input @click="denglu(),checkLogin('ruleForm')" class="button" type="button" value="登录" />
                    <input class="button" type="reset" value="重置">
                </div>

            </div>
        </el-form>
    </div>
</template>

 <script>
export default {
    name:'Login',
    data(){
        return{

            userName: '',
            password: '',
            msg: (Math.round(Math.random() * (9999 - 1000)) + 1000),
            msg2: '',
            ruleForm: {
                userName: '',
                password: ''
            },
            rules: {
                userName: [{
                    required: true,
                    message: '用户名不能为空',
                    trigger: 'blur'
                },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
                ],
                password: [{
                    required: true,
                    message: '密码不能为空',
                    trigger: 'blur'
                },

                ]
            }

        }
    },
    methods:{

        denglu() {
            var cwts = '';
            if(this.userName!=''&&this.password!=''){
                if (this.userName == "admin" && this.password == "admin" && this.msg2 == this.msg) {
                    alert("登录成功");
                    this.userName = ''; //这里就是清空信息，
                    this.password = '';
                    self.location.href = "index.html"
                } else {
                    if (this.userName != "admin")
                        cwts = "用户名";
                    if (this.password != "admin")
                        cwts += "密码";
                    if (this.msg2 != this.msg)
                        cwts += "验证码";
                    alert("登录失败--" + cwts + "出错");
                    this.yzmu();
                }
            }

        },

        yzmu() {
            this.msg = (Math.round(Math.random() * (9999 - 1000)) + 1000);
        },
        checkLogin(formName){

            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });


        }

    }
}

</script>
<style>

    * {
        margin: 0;
        padding: 0;
    }

    html {
        height: 100%;
        width: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
        background: url(https://img2018.cnblogs.com/blog/1194208/201811/1194208-20181116152635891-959860821.jpg) no-repeat 0px 0px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        -moz-background-size: 100% 100%;
    }

    body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    a #loginDiv {
        width: 37%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 300px;
        background-color: rgba(75, 81, 95, 0.3);
        box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
        border-radius: 5px;

    }

    #name_trip {
        margin-left: 50px;
        color: red;
    }

    p {
        margin-top: 10px;
        margin-left: 15px;
        /* color: azure; */
        color: black;
    }

    input {
        margin-left: 15px;
        border-radius: 5px;
        border-style: hidden;
        height: 30px;
        width: 140px;
        background-color: rgba(216, 191, 216, 0.5);
        outline: none;
        color: #f0edf3;
        padding-left: 10px;
    }

    i{
        margin-right: 2px;
        margin-top: 3px;
    }

    .button {
        border-color: cornsilk;
        background-color: rgba(100, 149, 237, .7);
        color: aliceblue;
        border-style: hidden;
        border-radius: 5px;
        width: 100px;
        height: 31px;
        font-size: 16px;
    }

    #app {
        height: 320px;
        width: 320px;
        border: 1px solid #00FFFF;
        border-radius: 20px;
        /* background-color: #F0EDF3; */

    }

    h1 {
        color: white;
        text-shadow: 0 0 10px;
        letter-spacing: 1px;
        text-align: center;
    }
    .el-form-item__error{
        margin-left: 100px;

    }

</style>
